<!-- 设置动态表单组件--右侧抽屉设置栏 -->
<template>
  <div class="drawer" :style="{ right: visible ? '0' : '-350px' }">
    <div class="drawer-title">
      <div class="txt">{{ getComponent?.componentName }}</div>
      <div @click="visible = false">
        <!-- <span class="icon-delete iconfont icon" /> -->
        <icon-right />
      </div>
    </div>
    <a-form layout="vertical" class="form" :model="formData" size="small">
      <a-form-item label="组件名称:">
        <a-input
          placeholder="请输入组件名称"
          v-model="formData.name"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <a-form-item label="是否必填:">
        <a-switch
          v-model="formData.required"
          :checked-value="1"
          :unchecked-value="2"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <a-form-item label="显示区域:">
        <a-radio-group
          type="button"
          v-model="formData.span"
          @change="emit('componentObjChange', formData)"
        >
          <a-radio :value="12">50%</a-radio>
          <a-radio :value="24">100%</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="设为审批流程条件">
        <a-switch
          v-model="formData.isProcessConditions"
          :checked-value="1"
          :unchecked-value="2"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <ExtendedFields
        :props="formData.props"
        :showFieldList="getComponent?.showFieldList"
        :uuid="componentObj.uuid"
        @propsChange="propsChange"
      />
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from 'vue';
import { componentList } from '../../../set-up-config';
import ExtendedFields from './extended-fields.vue';

const visible = ref(false);
defineExpose({ visible });
const emit = defineEmits(['componentObjChange']);
const props = withDefaults(
  //参数说明
  defineProps<{
    componentObj: any;
  }>(),
  {
    componentObj: {
      code: '',
      componentType: '',
      props: {},
      required: 2,
      span: '',
      name: '',
      uuid: '',
      isMust: 2,
      isProcessConditions: 2
    }
  }
);

//根据组件code返回组件信息
const getComponent = computed(() => {
  return componentList.find((item) => item.code === props.componentObj.code);
});

const formData = reactive({
  //复制componentObj
  code: '',
  componentType: '',
  props: {},
  required: 2,
  span: '',
  name: '',
  isMust: 2,
  isProcessConditions: 2
});
//监听uuid改变复制componentObj
// watch(
//   () => props.componentObj.uuid,
//   () => {
//     formData.code = props.componentObj.code;
//     formData.componentType = props.componentObj.componentType;
//     formData.props = {
//       ...props.componentObj.props
//     };
//     formData.required = props.componentObj.required;
//     formData.span = props.componentObj.span;
//     formData.name = props.componentObj.name;
//     formData.isMust = props.componentObj.isMust;
//     formData.isProcessConditions = props.componentObj.isProcessConditions;
//   }
// );

watchEffect(() => {
  console.log('====================================2323232');
  console.log(props.componentObj);
  console.log('====================================');
  formData.code = props.componentObj.code;
  formData.componentType = props.componentObj.componentType;
  formData.props = props.componentObj.props;

  // formData.props = JSON.stringify(props.componentObj.props);
  // formData.props = JSON.parse(props.componentObj.props);
  formData.required = props.componentObj.required;
  formData.span = props.componentObj.span;
  formData.name = props.componentObj.name;
  formData.isMust = props.componentObj.isMust;
  formData.isProcessConditions = props.componentObj.isProcessConditions;
});

const propsChange = (backProps: any) => {
  console.log('backProps', backProps);

  //props发生改变
  formData.props = {
    ...backProps
  };
  console.log('====================================ddddd');
  console.log(formData.props);
  console.log('====================================');
  emit('componentObjChange', formData);
};
</script>

<style lang="less" scoped>
.drawer {
  width: 350px;
  position: absolute;
  background: #fff;
  top: 0;
  bottom: 0;
  transition-property: all;
  transition-duration: 0.3s;

  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;

    .icon {
      font-size: 20px;
      cursor: pointer;
    }
  }
}

.form {
  padding: 10px;
}
</style>
